'use client';

import { Box, Container, Typography, Button, Stack } from '@mui/material';
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/navigation';

export default function HeroSection({ onCreateProject }) {
  const { t } = useTranslation();
  const router = useRouter();
  return (
    <Box sx={{ position: 'relative' }}>
      {/* 白色导航区域 - 严格按照图片 */}
      <Box sx={{ bgcolor: 'white', py: 2 }}>
        <Container maxWidth="xl">
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
            <Typography
              variant="body2"
              sx={{
                color: '#666666',
                cursor: 'pointer',
                fontWeight: 500
              }}
            >
              nav-seleced
            </Typography>
            <Typography
              variant="body2"
              sx={{
                color: '#666666',
                cursor: 'pointer',
                opacity: 0.7
              }}
            >
              nav-default
            </Typography>
            <Typography
              variant="body2"
              sx={{
                color: '#666666',
                cursor: 'pointer',
                opacity: 0.7
              }}
            >
              nav-default
            </Typography>
            <Typography
              variant="body2"
              sx={{
                color: '#666666',
                cursor: 'pointer',
                opacity: 0.7
              }}
            >
              nav-default
            </Typography>
          </Box>
        </Container>
      </Box>

      {/* 渐变主横幅 */}
      <Box
        sx={{
          position: 'relative',
          background: 'linear-gradient(135deg, #ff6b9d 0%, #c44569 25%, #6c5ce7 50%, #74b9ff 100%)',
          minHeight: '400px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          overflow: 'hidden',
          '&::before': {
            content: '""',
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
            opacity: 0.3
          }
        }}
      >
        <Container maxWidth="xl">
          <Box
            sx={{
              textAlign: 'center',
              position: 'relative',
              zIndex: 2
            }}
          >
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              <Typography
                variant="h2"
                sx={{
                  color: 'white',
                  mb: 2,
                  textShadow: '0 4px 8px rgba(0,0,0,0.3)',
                  fontSize: { xs: '2.5rem', md: '3.5rem' },
                  fontWeight: 700,
                  letterSpacing: '-0.02em'
                }}
              >
                DataOps
              </Typography>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
            >
              <Typography
                variant="h5"
                sx={{
                  color: 'white',
                  lineHeight: 1.6,
                  opacity: 0.95,
                  fontSize: { xs: '1.1rem', md: '1.3rem' },
                  fontWeight: 400,
                  mb: 4,
                  textShadow: '0 2px 4px rgba(0,0,0,0.2)',
                  maxWidth: '600px',
                  mx: 'auto'
                }}
              >
                一个强大的语言模型微调数据集创建中心
              </Typography>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
            >
              <Stack
                direction={{ xs: 'column', sm: 'row' }}
                spacing={2}
                justifyContent="center"
                alignItems="center"
              >
                <Button
                  variant="contained"
                  onClick={onCreateProject}
                  sx={{
                    bgcolor: '#1976d2',
                    color: 'white',
                    borderRadius: '8px',
                    fontSize: '1rem',
                    textTransform: 'none',
                    py: 1.5,
                    px: 3,
                    boxShadow: '0 4px 12px rgba(25, 118, 210, 0.4)',
                    '&:hover': {
                      bgcolor: '#1565c0',
                      boxShadow: '0 6px 16px rgba(25, 118, 210, 0.5)',
                      transform: 'translateY(-2px)'
                    },
                    transition: 'all 0.3s ease',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1
                  }}
                >
                  <img 
                    src="/iocns/add.png" 
                    alt="添加"
                    style={{
                      width: '20px',
                      height: '20px',
                      filter: 'brightness(0) invert(1)' // 将图标变为白色
                    }}
                  />
                  创建项目
                </Button>
                <Button
                  variant="contained"
                  sx={{
                    bgcolor: '#1976d2',
                    color: 'white',
                    borderRadius: '8px',
                    fontSize: '1rem',
                    textTransform: 'none',
                    py: 1.5,
                    px: 3,
                    boxShadow: '0 4px 12px rgba(25, 118, 210, 0.4)',
                    '&:hover': {
                      bgcolor: '#1565c0',
                      boxShadow: '0 6px 16px rgba(25, 118, 210, 0.5)',
                      transform: 'translateY(-2px)'
                    },
                    transition: 'all 0.3s ease',
                    display: 'flex',
                    alignItems: 'center',
                    gap: 1
                  }}
                  onClick={() => router.push('/dataset-square')}
                >
                  <img 
                    src="/iocns/search.png" 
                    alt="搜索"
                    style={{
                      width: '20px',
                      height: '20px',
                      filter: 'brightness(0) invert(1)' // 将图标变为白色
                    }}
                  />
                  搜索公开数据集
                </Button>
              </Stack>
            </motion.div>
          </Box>
        </Container>
      </Box>
    </Box>
  );
}
